//
//  SwiftUICompleteExamples.swift
//  swiftuitest
//
//  SwiftUI 完整示例集合
//

import SwiftUI

// MARK: - 1. 基础组件示例

/// 文本组件
struct TextExamplesView: View {
    var body: some View {
        VStack(spacing: 20) {
            // 基础文本
            Text("基础文本")
            
            // 自定义字体和大小
            Text("大标题")
                .font(.largeTitle)
            
            // 自定义字体样式
            Text("粗体文本")
                .fontWeight(.bold)
            
            // 自定义颜色
            Text("红色文本")
                .foregroundColor(.red)
            
            // 使用 SF Symbols
            Text("文本 + 图标")
                .font(.system(size: 24))
        }
    }
}

/// 图片组件
struct ImageExamplesView: View {
    var body: some View {
        VStack(spacing: 20) {
            // SF Symbols 图标
            Image(systemName: "heart.fill")
                .foregroundColor(.red)
                .imageScale(.large)
            
            // 调整图标大小
            Image(systemName: "star")
                .font(.system(size: 50))
            
            // 图片渲染模式
            Image(systemName: "photo")
                .renderingMode(.template)
                .foregroundColor(.blue)
        }
    }
}

/// 按钮组件
struct ButtonExamplesView: View {
    @State private var count = 0
    
    var body: some View {
        VStack(spacing: 20) {
            // 基础按钮
            Button("点击我") {
                count += 1
            }
            
            // 带样式的按钮
            Button("样式按钮") {
                // 操作
            }
            .buttonStyle(.borderedProminent)
            
            // 图标按钮
            Button {
                // 操作
            } label: {
                HStack {
                    Image(systemName: "plus.circle.fill")
                    Text("添加")
                }
            }
            
            // 文本显示点击次数
            Text("点击了 \(count) 次")
        }
    }
}

// MARK: - 2. 布局容器示例

/// VStack - 垂直布局
struct VStackExampleView: View {
    var body: some View {
        VStack(spacing: 10) {
            Text("顶部")
            Text("中间")
            Text("底部")
        }
    }
}

/// HStack - 水平布局
struct HStackExampleView: View {
    var body: some View {
        HStack(spacing: 20) {
            Text("左边")
            Text("中间")
            Text("右边")
        }
    }
}

/// ZStack - 重叠布局
struct ZStackExampleView: View {
    var body: some View {
        ZStack {
            Circle()
                .fill(Color.blue)
                .frame(width: 200, height: 200)
            Text("重叠文本")
                .foregroundColor(.white)
        }
    }
}

/// LazyVStack - 懒加载垂直布局
struct LazyVStackExampleView: View {
    var body: some View {
        ScrollView {
            LazyVStack(spacing: 10) {
                ForEach(0..<100) { index in
                    Text("项目 \(index)")
                }
            }
        }
    }
}

/// LazyHStack - 懒加载水平布局
struct LazyHStackExampleView: View {
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 10) {
                ForEach(0..<50) { index in
                    Text("项目 \(index)")
                        .padding()
                        .background(Color.gray.opacity(0.2))
                }
            }
        }
    }
}

/// Grid - 网格布局（iOS 16+）
struct GridExampleView: View {
    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 20) {
                ForEach(0..<20) { index in
                    Rectangle()
                        .fill(Color.blue)
                        .frame(height: 100)
                        .overlay(
                            Text("\(index)")
                                .foregroundColor(.white)
                        )
                }
            }
            .padding()
        }
    }
}

/// LazyVGrid - 懒加载垂直网格
struct LazyVGridExampleView: View {
    let columns = [
        GridItem(.adaptive(minimum: 100))
    ]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 10) {
                ForEach(0..<50) { index in
                    Rectangle()
                        .fill(Color.green)
                        .frame(height: 80)
                }
            }
            .padding()
        }
    }
}

// MARK: - 3. 状态管理示例

/// @State - 本地状态
struct StateExampleView: View {
    @State private var isOn = false
    
    var body: some View {
        VStack {
            Toggle("开关", isOn: $isOn)
            Text("状态: \(isOn ? "开启" : "关闭")")
        }
        .padding()
    }
}

/// @Binding - 双向绑定
struct BindingExampleView: View {
    @State private var text = ""
    
    var body: some View {
        VStack {
            TextField("输入文本", text: $text)
            ChildView(text: $text)
        }
        .padding()
    }
}

struct ChildView: View {
    @Binding var text: String
    
    var body: some View {
        Text("子视图显示: \(text)")
    }
}

/// @ObservedObject - 观察对象
class DataModel: ObservableObject {
    @Published var count = 0
    @Published var name = ""
}

struct ObservedObjectExampleView: View {
    @ObservedObject var model = DataModel()
    
    var body: some View {
        VStack {
            Text("计数: \(model.count)")
            Button("增加") {
                model.count += 1
            }
            TextField("名称", text: $model.name)
            Text("名称: \(model.name)")
        }
        .padding()
    }
}

/// @StateObject - 状态对象
struct StateObjectExampleView: View {
    @StateObject private var model = DataModel()
    
    var body: some View {
        VStack {
            Text("计数: \(model.count)")
            Button("增加") {
                model.count += 1
            }
        }
        .padding()
    }
}

/// @EnvironmentObject - 环境对象
struct EnvironmentObjectExampleView: View {
    @StateObject private var model = DataModel()
    
    var body: some View {
        NavigationView {
            VStack {
                Text("计数: \(model.count)")
                NavigationLink("详情页") {
                    DetailView()
                }
            }
            .navigationTitle("主页")
            .environmentObject(model)
        }
    }
}

struct DetailView: View {
    @EnvironmentObject var model: DataModel
    
    var body: some View {
        VStack {
            Text("详情页计数: \(model.count)")
            Button("增加") {
                model.count += 1
            }
        }
        .navigationTitle("详情")
    }
}

// MARK: - 4. 表单组件示例

/// 表单组件集合
struct FormExamplesView: View {
    @State private var text = ""
    @State private var isOn = false
    @State private var sliderValue: Double = 50
    @State private var pickerSelection = 0
    @State private var date = Date()
    @State private var stepperValue = 0
    
    let options = ["选项1", "选项2", "选项3"]
    
    var body: some View {
        Form {
            Section("文本输入") {
                TextField("输入文本", text: $text)
                SecureField("密码", text: $text)
                TextEditor(text: $text)
                    .frame(height: 100)
            }
            
            Section("开关和滑块") {
                Toggle("开关", isOn: $isOn)
                Slider(value: $sliderValue, in: 0...100)
                Text("滑块值: \(Int(sliderValue))")
            }
            
            Section("选择器") {
                Picker("选择", selection: $pickerSelection) {
                    ForEach(0..<options.count) { index in
                        Text(options[index]).tag(index)
                    }
                }
            }
            
            Section("日期和时间") {
                DatePicker("日期", selection: $date)
                DatePicker("时间", selection: $date, displayedComponents: .hourAndMinute)
            }
            
            Section("步进器") {
                Stepper("数量: \(stepperValue)", value: $stepperValue, in: 0...10)
            }
        }
    }
}

// MARK: - 5. 列表和导航示例

/// List - 列表
struct ListExampleView: View {
    let items = ["项目1", "项目2", "项目3", "项目4", "项目5"]
    
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
            }
        }
    }
}

/// List - 分组列表
struct GroupedListExampleView: View {
    var body: some View {
        List {
            Section("第一组") {
                Text("项目1")
                Text("项目2")
            }
            
            Section("第二组") {
                Text("项目3")
                Text("项目4")
            }
        }
    }
}

/// NavigationView - 导航视图
struct NavigationExampleView: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink("页面1") {
                    Text("页面1内容")
                        .navigationTitle("页面1")
                }
                NavigationLink("页面2") {
                    Text("页面2内容")
                        .navigationTitle("页面2")
                }
            }
            .navigationTitle("主页")
        }
    }
}

/// TabView - 标签栏
struct TabViewExampleView: View {
    var body: some View {
        TabView {
            Text("首页")
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("首页")
                }
            
            Text("搜索")
                .tabItem {
                    Image(systemName: "magnifyingglass")
                    Text("搜索")
                }
            
            Text("设置")
                .tabItem {
                    Image(systemName: "gearshape.fill")
                    Text("设置")
                }
        }
    }
}

// MARK: - 6. 动画示例

/// 基础动画
struct AnimationExampleView: View {
    @State private var scale: CGFloat = 1.0
    @State private var rotation: Double = 0
    @State private var offset: CGSize = .zero
    
    var body: some View {
        VStack(spacing: 30) {
            // 缩放动画
            Circle()
                .fill(Color.blue)
                .frame(width: 100, height: 100)
                .scaleEffect(scale)
                .onTapGesture {
                    withAnimation(.spring()) {
                        scale = scale == 1.0 ? 1.5 : 1.0
                    }
                }
            
            // 旋转动画
            Rectangle()
                .fill(Color.red)
                .frame(width: 100, height: 100)
                .rotationEffect(.degrees(rotation))
                .onTapGesture {
                    withAnimation(.easeInOut(duration: 1.0)) {
                        rotation += 180
                    }
                }
            
            // 位移动画
            Capsule()
                .fill(Color.green)
                .frame(width: 100, height: 50)
                .offset(offset)
                .onTapGesture {
                    withAnimation {
                        offset = offset == .zero ? CGSize(width: 100, height: 0) : .zero
                    }
                }
        }
    }
}

/// 过渡动画
struct TransitionExampleView: View {
    @State private var show = false
    
    var body: some View {
        VStack {
            Button("切换显示") {
                withAnimation {
                    show.toggle()
                }
            }
            
            if show {
                Text("显示内容")
                    .transition(.scale.combined(with: .opacity))
            }
        }
    }
}

// MARK: - 7. 修饰符示例

/// 常用修饰符
struct ModifierExampleView: View {
    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                // padding 内边距
                Text("带内边距的文本")
                    .padding()
                
                // background 背景
                Text("带背景的文本")
                    .padding()
                    .background(Color.yellow)
                
                // cornerRadius 圆角
                Text("圆角文本")
                    .padding()
                    .background(Color.blue)
                    .cornerRadius(10)
                
                // shadow 阴影
                Text("带阴影的文本")
                    .padding()
                    .background(Color.white)
                    .shadow(radius: 10)
                
                // border 边框
                Text("带边框的文本")
                    .padding()
                    .border(Color.red, width: 2)
                
                // overlay 覆盖层
                Rectangle()
                    .fill(Color.gray)
                    .frame(width: 200, height: 100)
                    .overlay(
                        Text("覆盖文本")
                            .foregroundColor(.white)
                    )
                
                // frame 框架
                Text("固定尺寸文本")
                    .frame(width: 200, height: 50)
                    .background(Color.green)
                
                // opacity 透明度
                Text("半透明文本")
                    .opacity(0.5)
                
                // blur 模糊
                Text("模糊文本")
                    .blur(radius: 2)
            }
            .padding()
        }
    }
}

// MARK: - 8. 手势识别示例

/// 手势识别
struct GestureExampleView: View {
    @State private var dragOffset = CGSize.zero
    @State private var scale: CGFloat = 1.0
    @State private var rotation: Double = 0
    
    var body: some View {
        VStack(spacing: 50) {
            // 拖动手势
            Circle()
                .fill(Color.blue)
                .frame(width: 100, height: 100)
                .offset(dragOffset)
                .gesture(
                    DragGesture()
                        .onChanged { value in
                            dragOffset = value.translation
                        }
                        .onEnded { _ in
                            withAnimation {
                                dragOffset = .zero
                            }
                        }
                )
            
            // 点击手势
            Rectangle()
                .fill(Color.red)
                .frame(width: 100, height: 100)
                .onTapGesture {
                    print("点击了")
                }
                .onLongPressGesture {
                    print("长按了")
                }
            
            // 缩放手势
            Rectangle()
                .fill(Color.green)
                .frame(width: 100, height: 100)
                .scaleEffect(scale)
                .gesture(
                    MagnificationGesture()
                        .onChanged { value in
                            scale = value
                        }
                        .onEnded { _ in
                            withAnimation {
                                scale = 1.0
                            }
                        }
                )
            
            // 旋转手势
            Rectangle()
                .fill(Color.orange)
                .frame(width: 100, height: 100)
                .rotationEffect(.degrees(rotation))
                .gesture(
                    RotationGesture()
                        .onChanged { value in
                            rotation = value.degrees
                        }
                        .onEnded { _ in
                            withAnimation {
                                rotation = 0
                            }
                        }
                )
        }
    }
}

// MARK: - 9. Sheet 和 Alert 示例

/// Sheet - 模态视图
struct SheetExampleView: View {
    @State private var showSheet = false
    
    var body: some View {
        Button("显示 Sheet") {
            showSheet = true
        }
        .sheet(isPresented: $showSheet) {
            Text("这是 Sheet 内容")
                .presentationDetents([.medium, .large])
        }
    }
}

/// Alert - 警告框
struct AlertExampleView: View {
    @State private var showAlert = false
    
    var body: some View {
        Button("显示 Alert") {
            showAlert = true
        }
        .alert("警告", isPresented: $showAlert) {
            Button("确定", role: .destructive) {
                // 操作
            }
            Button("取消", role: .cancel) {}
        } message: {
            Text("这是一个警告消息")
        }
    }
}

/// ActionSheet - 操作表（iOS 15+）
struct ActionSheetExampleView: View {
    @State private var showActionSheet = false
    
    var body: some View {
        Button("显示操作表") {
            showActionSheet = true
        }
        .confirmationDialog("选择操作", isPresented: $showActionSheet, titleVisibility: .visible) {
            Button("选项1") {}
            Button("选项2") {}
            Button("删除", role: .destructive) {}
            Button("取消", role: .cancel) {}
        }
    }
}

// MARK: - 10. 颜色和样式示例

/// 颜色渐变
struct GradientExampleView: View {
    var body: some View {
        VStack(spacing: 20) {
            // 线性渐变
            LinearGradient(
                colors: [.red, .blue],
                startPoint: .leading,
                endPoint: .trailing
            )
            .frame(height: 100)
            
            // 径向渐变
            RadialGradient(
                colors: [.yellow, .orange],
                center: .center,
                startRadius: 0,
                endRadius: 100
            )
            .frame(width: 200, height: 200)
            
            // 角度渐变
            AngularGradient(
                colors: [.red, .yellow, .green, .blue, .purple],
                center: .center
            )
            .frame(width: 200, height: 200)
        }
    }
}

/// 形状示例
struct ShapeExampleView: View {
    var body: some View {
        VStack(spacing: 20) {
            // 圆形
            Circle()
                .fill(Color.blue)
                .frame(width: 100, height: 100)
            
            // 矩形
            Rectangle()
                .fill(Color.red)
                .frame(width: 100, height: 100)
            
            // 圆角矩形
            RoundedRectangle(cornerRadius: 20)
                .fill(Color.green)
                .frame(width: 100, height: 100)
            
            // 胶囊形状
            Capsule()
                .fill(Color.orange)
                .frame(width: 100, height: 50)
            
            // 椭圆形
            Ellipse()
                .fill(Color.purple)
                .frame(width: 150, height: 100)
        }
    }
}

// MARK: - 11. 进度指示器示例

/// 进度指示器
struct ProgressExampleView: View {
    @State private var progress: Double = 0.5
    
    var body: some View {
        VStack(spacing: 30) {
            // 进度条
            ProgressView(value: progress)
                .progressViewStyle(.linear)
            
            // 百分比进度
            ProgressView("加载中...", value: progress)
            
            // 不确定进度
            ProgressView()
            
            // 圆形进度
            ProgressView(value: progress)
                .progressViewStyle(.circular)
            
            Button("增加进度") {
                if progress < 1.0 {
                    progress += 0.1
                } else {
                    progress = 0
                }
            }
        }
        .padding()
    }
}

// MARK: - 12. 工具栏示例

/// 工具栏
struct ToolbarExampleView: View {
    var body: some View {
        NavigationView {
            Text("内容")
                .navigationTitle("标题")
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button {
                            // 操作
                        } label: {
                            Image(systemName: "plus")
                        }
                    }
                    
                    ToolbarItem(placement: .navigationBarLeading) {
                        Button {
                            // 操作
                        } label: {
                            Image(systemName: "trash")
                        }
                    }
                }
        }
    }
}

// MARK: - 13. 搜索栏示例

/// 搜索栏
struct SearchExampleView: View {
    @State private var searchText = ""
    let items = ["苹果", "香蕉", "橙子", "葡萄", "西瓜"]
    
    var filteredItems: [String] {
        if searchText.isEmpty {
            return items
        } else {
            return items.filter { $0.contains(searchText) }
        }
    }
    
    var body: some View {
        NavigationView {
            List {
                ForEach(filteredItems, id: \.self) { item in
                    Text(item)
                }
            }
            .navigationTitle("搜索")
            .searchable(text: $searchText, prompt: "搜索水果")
        }
    }
}

// MARK: - 14. 刷新控件示例

/// 下拉刷新
struct RefreshExampleView: View {
    @State private var items = ["项目1", "项目2", "项目3"]
    
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
            }
        }
        .refreshable {
            // 模拟网络请求
            try? await Task.sleep(nanoseconds: 1_000_000_000)
            items.append("新项目 \(items.count + 1)")
        }
    }
}

// MARK: - 15. 主要示例视图（整合所有示例）

/// 主视图 - 展示所有示例的入口
struct SwiftUICompleteExamplesView: View {
    var body: some View {
        NavigationView {
            List {
                Section("基础组件") {
                    NavigationLink("文本示例") { TextExamplesView() }
                    NavigationLink("图片示例") { ImageExamplesView() }
                    NavigationLink("按钮示例") { ButtonExamplesView() }
                }
                
                Section("布局容器") {
                    NavigationLink("VStack") { VStackExampleView() }
                    NavigationLink("HStack") { HStackExampleView() }
                    NavigationLink("ZStack") { ZStackExampleView() }
                    NavigationLink("LazyVStack") { LazyVStackExampleView() }
                    NavigationLink("Grid") { GridExampleView() }
                }
                
                Section("状态管理") {
                    NavigationLink("@State") { StateExampleView() }
                    NavigationLink("@Binding") { BindingExampleView() }
                    NavigationLink("@ObservedObject") { ObservedObjectExampleView() }
                    NavigationLink("@StateObject") { StateObjectExampleView() }
                    NavigationLink("@EnvironmentObject") { EnvironmentObjectExampleView() }
                }
                
                Section("表单组件") {
                    NavigationLink("表单示例") { FormExamplesView() }
                }
                
                Section("列表和导航") {
                    NavigationLink("List") { ListExampleView() }
                    NavigationLink("分组列表") { GroupedListExampleView() }
                    NavigationLink("导航视图") { NavigationExampleView() }
                    NavigationLink("标签栏") { TabViewExampleView() }
                }
                
                Section("动画") {
                    NavigationLink("动画示例") { AnimationExampleView() }
                    NavigationLink("过渡动画") { TransitionExampleView() }
                }
                
                Section("修饰符") {
                    NavigationLink("修饰符示例") { ModifierExampleView() }
                }
                
                Section("手势") {
                    NavigationLink("手势示例") { GestureExampleView() }
                }
                
                Section("弹窗") {
                    NavigationLink("Sheet") { SheetExampleView() }
                    NavigationLink("Alert") { AlertExampleView() }
                    NavigationLink("ActionSheet") { ActionSheetExampleView() }
                }
                
                Section("样式") {
                    NavigationLink("渐变") { GradientExampleView() }
                    NavigationLink("形状") { ShapeExampleView() }
                }
                
                Section("其他") {
                    NavigationLink("进度指示器") { ProgressExampleView() }
                    NavigationLink("工具栏") { ToolbarExampleView() }
                    NavigationLink("搜索栏") { SearchExampleView() }
                    NavigationLink("下拉刷新") { RefreshExampleView() }
                }
                
                Section("Model 示例") {
                    NavigationLink("所有 Model 示例") { SwiftUIModelExamplesView() }
                }
            }
            .navigationTitle("SwiftUI 完整示例")
        }
    }
}

#Preview {
    SwiftUICompleteExamplesView()
}
